<?$this->_extends("_layouts/index_layout");?>

<?$this->_block("contents");?>
<script type="text/javascript" src="<?=$_BASE_DIR?>js/jquery.fancybox.pack.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="<?=$_BASE_DIR?>css/jquery.fancybox.css?v=2.1.2" media="screen" />
<style type="text/css">
	.fancybox-custom .fancybox-skin {
		box-shadow: 0 0 50px #222;
	}
</style>
<script>
	$('.fancybox').fancybox({scrolling:'none'});
	$(function(){
	    $("img[class^='cp']").mouseover(function(){
	        $('embed').remove(); 
	        $('body').append('<embed src="<?=$_BASE_DIR?>images/btn.mp3" autostart="true" hidden="true" loop="false">');
	 		$("img[class^='cp']").each(function(){
	 			$(this).css('width','90px');
	 			$(this).css('margin-top','20px');
	 			$(this).css('margin-left','20px');
	 			$(this).css('margin-right','20px');
	 			$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'.jpg')
	 		});
	 		$(this).css('width','130px');
	 		$(this).css('margin-top','0');
	 		$(this).css('margin-left','0');
	 		$(this).css('margin-right','0');
	 		$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'b.jpg');
	    });
	    $("img[class^='cp']").mouseout(function(){
	    	$(this).css('width','90px');
	 		$(this).css('margin-top','20px');
	 		$(this).css('margin-left','20px');
	 		$(this).css('margin-right','20px');
	 		$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'.jpg')
	    });
	});
</script>
	<div id="main30" style="width:954px;" >
		<ul class="cp" >
			<li><a class="fancybox" href="<?=$_BASE_DIR?>images/cp1s.jpg" data-fancybox-group="gallery1"><img class='cp1' src='<?=$_BASE_DIR?>images/cp1.jpg'/></a></li>
			<li><a class="fancybox fancybox.iframe" href="<?=$_BASE_DIR?>images/cp2s.html" data-fancybox-group="gallery2"><img class='cp2' src='<?=$_BASE_DIR?>images/cp2.jpg'/></a></li>
			<li><a class="fancybox" href="<?=$_BASE_DIR?>images/cp3s.jpg" data-fancybox-group="gallery3"><img class='cp3' src='<?=$_BASE_DIR?>images/cp3.jpg'/></a></li>
			<li><a class="fancybox" href="<?=$_BASE_DIR?>images/cp4s.jpg" data-fancybox-group="gallery4"><img class='cp4' src='<?=$_BASE_DIR?>images/cp4.jpg'/></a></li>
			<li><a class="fancybox" href="<?=$_BASE_DIR?>images/cp5s.jpg" data-fancybox-group="gallery5"><img class='cp5' src='<?=$_BASE_DIR?>images/cp5.jpg'/></a></li>
			<li><a class="fancybox" href="<?=$_BASE_DIR?>images/cp6s.jpg" data-fancybox-group="gallery6"><img class='cp6' src='<?=$_BASE_DIR?>images/cp6.jpg'/></a></li>
		</ul>
	</div>
	<div class="cls"></div>
<?$this->_endblock();?>
